<template>
  <div class="count">
     <button class="btn1" @click="sub">-</button>
      <span class="allcount">{{count}}</span>
      <button class="btn2" @click="add">+</button>
   
  </div>
</template>

<script>
import bus from './bus'
export default {
    props:{
        count:{
            type: Number,
            default: 1
        },
        id:{
            type:Number
        }
    },
    methods:{
        add:function(){
            const obj = {id:this.id,count:this.count+1}
            bus.$emit('share',obj);
        },
        sub(){
            const obj = {id:this.id,count:this.count-1}
            bus.$emit('share',obj);
        }
    }

}

</script>

<style>
.count{
   text-align: center;
    width: 100px;
    height: 30px;
    float: right;
}
.allcount{
    
    line-height: 30px;
}
.btn1,.btn2{
    margin: 0;
    width: 30px;
    height: 30px;
    border: 0;
    background-color: rgb(241, 229, 229);
}
.btn1{
    float: left;
}
.btn2{
    float: right;
}


</style>